このページは私用WordPressの覚え書き兼、テストページです。
「SNSボタン」は、テスト検証用に仮設置しているだけなので、押しても反応しません。

005_1ビジュアルエディターを解除する方法

1年ぐらいwordpressを使ってなくて、ひさびさに最新のWordpressを使ったら、記事を投稿するテキストの部分、エディターの仕様が様変わりしていて、すごくとまどいました。

なかでも、この「ブロックエディター」というのが、すっっっっごく使いにくい


ブロックエディターって、いったい何なの!?

この「実験ブログ」では、「SyntaxHighlighter Evolved」というプラグインを使って、HTMLタグなどのソースをそのまま表示させるということを頻繁にやっているのですが、まず文字を2~3文字入力 → ブロックをHTML表示にする → 改めてソースを入力・・・という手順でやっていて、これがかなりめんどくさい。

いちいちブロックを作ってくれるので、そのたびに毎度毎度やるのがめんどくさかったのですが、しょうがないかと我慢してやってました。

しかし・・・

なんと、他のタブをクリックしたり、photoshopなどを使ったした後にブログに戻った時、何かの拍子に、勝手にHTML表示からビジュアルエディターに戻ってしまい、ソースコードが勝手に書き換わってしまう現象が起き、ここで怒りが爆発していましました。


この、<p>タグで勝手にブロックを作ったり、<br />が消えたり、ソースコードを勝手に書き換えてくれるという、余計なお世話機能は、ほんんと、い ら な い です。

新しくなる度に、毎回これなので、ほんと、ぐったりと疲れてしまいます・・・。


最初からシンプルにHTMLモードに固定させておくことはできないのかと探しましたら、
ありました。
ダッシュボード画面右上の3点ボタンをクリック、
   ↓


真ん中くらいのとこに、「エディタ」という項目があり、「ビジュアルエディター」か「コードエディター」かを切り替えられます。
「コードエディタ」=「HTML」です。


これで勝手にコードを書き換えられることはなくなりました。

※ログアウトした後に、もしまた「ビジュアルエディター」に戻ってたりしたらイヤなので、入力したテキストは、メモ帳にコピペ保存しておく事を推奨します。


ただ、一個だけ問題なのが、「コードエディター」だと画像を挿入できないこと。
一旦、「ビジュアルエディター」に戻して、+ボタンで画像を選ばないと、画像は挿入できないみたいです。


結局、どうあっても「ビジュアルエディター」を使わざるをえないのか・・・最悪・・・


「コードエディター」で画像を追加するには

検索してみますと、「コードエディター」で画像を追加するには、

<!-- wp:image {"id":画像ID} --><!-- /wp:image -->

というコードを書く、という事らしいのですが、
画像IDって、画像をアップロードした後じゃないと、わからないんじゃないの・・・?
その画像のアップロードが、「コードエディター」状態ではできないっつってんのにさ。


さらに調べてわかったこと。
新しくなったこのwordPressのエディターは、新しいブロックを追加する時に、「見出し」か「本文」か「画像」か、だけでなく、「SyntaxHighlighter Code」を選べる。
つまり、もうプラグインの「SyntaxHighlighter Evolved」は、なくてもいいということ。


WordPressの自動整形を無効にする

それから、検索したら、WordPressの自動整形を無効にする記事で、下記のページを発見したのでメモ。

なんでもWordPressの自動整形は、2種類あるらしい。
記事編集中は「TinyMCEの自動整形」、記事表示の時には「wpautop関数の整形機能」が使われるらしい。
そしてさらに特殊記号などを自動変換してしまう「wptexturize関数による自動整形」というものもあるようです。

[参考サイト]
  ↓
[WordPress]この記事だけでいい!特定の記事、固定ページだけでHTMLの自動整形を無効化する方法
【WordPress】特殊文字が自動変換されるのを回避する方法。


ということで、functions.phpに下記の3種の記述を入れることにしました。
   ↓

<?php
//記事表示時の整形無効(wpautop関数による整形機能を無効)
add_action(
    'wp_head',
    function(){
    	remove_filter('the_content', 'wpautop');
    	remove_filter('the_excerpt', 'wpautop');
	}
);
?>
<?php
//ビジュアルエディター(TinyMCEの整形無効)
add_filter(
	'tiny_mce_before_init',
	function($init_array){
		global $allowedposttags;
		$init_array['valid_elements']          = '*[*]';
		$init_array['extended_valid_elements'] = '*[*]';
		$init_array['valid_children']          = '+a[' . implode( '|',
array_keys( $allowedposttags ) ) . ']';
		$init_array['indent']                  = true;
		$init_array['wpautop']                 = false;
		$init_array['force_p_newlines']        = false;
		return $init_array;
	}
);

?>
<?php
//特殊文字が自動変換されるのを回避(wptexturize関数での自動変換を無効)
add_filter( 'run_wptexturize', '__return_false' );
?>


syntaxhighlighterのプラグインを使っているとバグる?

どうも、新しく実装された「wp:syntaxhighlighter/code」っていうのは、今まで使っていたプラグイン用のタグ[][/]があるとダメっぽですね。

これが入っていると > が、& g t ; に勝手に変換されてしまう。
しかも < は、何故か変換は行われずちゃんと表示される。

ほんと、余計なお世話を通り越して、なんでこんな事になるんでしょうか。怒りMAXです。ほんとに


最終兵器「Classic Editor」をインストール

・・・その後・・・

やっぱり、どうにも我慢できなかったので、プラグイン「Classic Editor」を入れました。

すべて解決しました。    終了。